<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getClassDes } from '../api/class/classdes'
import { showToast } from 'vant'
import { useStore } from '../stores/class'
export default defineComponent({
  setup() {
    let router = useRouter()
    let route: any = useRoute()
    const store = useStore()
    let price = route.query.price
    let seriesid = route.query.seriesid
    let userinput = route.query.userinput
    let classDes: any = ref(null)
    let newtime: any = ref(null)
    let groupId = route.query.groupId
    let btnType = ref<string>('zfb')
    let back = () => {
      store.payClass.push({
        groupId,
        seriesid,
        price,
        payment: 0,
        userinput,
        newtime: newtime.value,
        data: classDes.value,
      })
      localStorage.setItem('payClass', JSON.stringify(store.payClass))
      localStorage.setItem('order', JSON.stringify(store.payClass))
      router.back()
    }
    let getClassDesFun = (groupId: any) => {
      getClassDes(groupId).then((data: any) => {
        console.log('课程详情数据=>', data)
        classDes.value = data.data
        console.log('课程详情数据classDes=>', classDes.value)
      })
    }
    let paytype = (type: any) => {
      btnType.value = type
    }
    //点击立即支付
    let finishpayment = () => {
      showToast('支付完成')
      let index = store.payClass.findIndex((item: any) => item.groupId == groupId)
      if (index != -1) {
        store.payClass[index] = {
          groupId,
          seriesid,
          price,
          payment: 1,
          btnType,
          data: classDes.value,
          userinput,
          newtime:newtime.value
        }
      } else {
        store.payClass.push({
          groupId,
          seriesid,
          price,
          payment: 1,
          data: classDes.value,
          userinput,
          newtime:newtime.value
        })
      }

      localStorage.setItem('payClass', JSON.stringify(store.payClass))
      localStorage.setItem('order', JSON.stringify(store.payClass))
      router.push({
        path: '/classDes',
        query: {
          groupId,
          payment: 'yes',
          price
        }
      })
    }
    onMounted(() => {
      getClassDesFun(groupId)
      let time = new Date().getTime() + 15 * 60 * 1000
      console.log('time', time)
      newtime.value = new Date(time).toLocaleString()
      console.log(newtime)
    })
    return {
      back,
      classDes,
      newtime,
      paytype,
      btnType,
      finishpayment,
      price
    }
  }
})
</script>
<template>
  <div class="payment" v-if="classDes">
    <span class="iconfont icon-xiangzuojiantou" @click="back"></span>
    <div class="pay-top">收银台</div>
    <div class="time" v-if="price">
      <span class="iconfont icon-icon-"></span>
      请在
      <em>{{ newtime }}前</em>
      完成支付!
    </div>
    <!-- 订单名称 -->
    <div class="pay-name">
      <div class="pay-name-des">{{ classDes.groupName }}</div>
      <div class="pay-price">￥{{ price }}</div>
    </div>
    <!-- 支付方式 -->
    <div class="pay-type">
      <ul>
        <li @click="paytype('zfb')">
          <div class="pay-logo"></div>
          <span>支付宝</span>
          <div class="select" v-show="btnType == 'zfb'">
            <div>√</div>
          </div>
        </li>
        <li @click="paytype('wx')">
          <div class="pay-logo"></div>
          <span>微信</span>
          <div class="select" v-show="btnType == 'wx'">
            <div>√</div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 立即支付 -->
    <div class="class-fixed-bottom">
      <div class="class-btn" @click="finishpayment">立即支付</div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.payment {
  & > span {
    position: absolute;
    color: #f5f5f5;
    font-weight: 600;
    line-height: 45px;
    margin-left: 15px;
  }
}
.pay-top {
  height: 45px;
  background-color: #2d353c;
  color: #fffff3;
  text-align: center;
  font-size: 16px;
  line-height: 45px;
}
.time {
  height: 35px;
  padding: 0 8px;
  line-height: 35px;
  color: #000;
  background-color: #fffaeb;
  font-size: 14px;
  span {
    margin-right: 5px;
  }
  em {
    color: #ff6029;
  }
}
.pay-name {
  height: 98px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 15px;
  background-color: #f5f5f5;
  .pay-name-des {
    line-height: 32px;
    font-size: 16px;
    color: #333333;
  }
  .pay-price {
    line-height: 26px;
    color: #ff6529;
    font-size: 18px;
  }
}
.pay-type {
  padding-right: 15px;
  margin-left: 15px;
  ul {
    li {
      height: 57px;
      line-height: 57px;
      font-size: 14px;
      position: relative;
      border-bottom: 1px solid #f6f6f6;
      & > span {
        margin-left: 15px;
      }
      .select {
        position: absolute;
        right: 0px;
        top: 15px;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background-color: #49b849;
        color: #fffde7;
        font-weight: 600;
        div {
          margin-top: -17px;
          margin-left: 5px;
        }
      }
    }
  }
}
.class-fixed-bottom {
  width: 100%;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  z-index: 100;
  height: 55px;
}
.class-btn {
  background-color: #49b849;
  color: #fff;
  height: 44px;
  width: 91%;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  line-height: 44px;
  border-radius: 20px;
  margin-right: 13px;
  margin-left: 15px;
}
</style>